<template>
  <div>
      <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <!-- 如果后台拿数据遍历的时候，我们的第一个要进行类的处理 -->
                    <!-- :class="['mui-control-item',id==2?'mui-active':'']"  -->
                    <a :class="['mui-control-item',item.id==0?'mui-active':'']" v-for="item in cates" :key="item.id" @click="getPhoto(item.id)" >
                        {{item.title}}
                    </a>
                </div>
            </div>
        </div>
      <!-- 图片的额列表区域 -->
        <ul class="photo-list">
            <router-link v-for="elem in imgList" :key='elem.id' :to="'/home/photoInfo/'+elem.id" tag="li">
                 <img v-lazy="elem.url">
                 <div class="info">
                     <h1 class="info-title">这个一张漂亮的图片</h1>
                     <div class="info-body">Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。</div>
                 </div>
             </router-link>
        </ul>  
  </div>
</template>
<script>
import mui from '../../lib/dist/js/mui.js'

export default{
    data(){
        return{
            cates:[
                {title:'全部',id:0},
                {title:'电影',id:1},
                {title:'北京',id:2},
                {title:'社会',id:3},
                {title:'娱乐',id:4},
                {title:'美女',id:5},
                {title:'游戏',id:6},
                {title:'艺术',id:7},
            ],
            imgListSum:[
               [
                   {id:0,url:''},
                    {id:1,url:'https://avatars0.githubusercontent.com/u/51347185?s=40&v=4'},
                    {id:2,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUMI4ccwS3UkAyUWaaGXV_40nTaZ1ywTOfjpsKWrz6TT7CH_5j'},
                    {id:3,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8l0ljYO3dRPT63CHGvzEm6sFVedvMvFpEzV2SKoy2P8ALAlT6Dg'},
                    {id:4,url:''},
                    {id:5,url:''},
                    {id:6,url:''},
                    {id:7,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOQ7aKCZdHvTPWAIv3OHG8aDMBuXwDr8t-KIyfGpcOGRDjyhQYqA'},
                    {id:8,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgUotkELcQ2AMoRioAHaBCieKNrJtm0oH2_yI2yx9ScNkWDneBGA'},
                    {id:9,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLD1nevGMMpqIygOprAhCW6qSWndJmJL5A4VampyGxaPeA4sZ4aw'},
                    {id:10,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbQyVRODFNQur0QCMKvnInYNTxIh8fotFVAoLAdsb-8r6FmdSH'}
                    ],
               [
                   {id:0,url:''},
                   {id:1,url:''},
                   {id:2,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSayqmbSwRIeRYTrVLhQiKdYMzlvOdfoYn0QgL8p-yw-HkTQGSELQ'},
                   {id:3,url:''},
                   {id:4,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1y0iNzrnERuxzSv07M7pHS_OVHyVhj3fMMjxd4bekPOoe-zK8'},
                   {id:5,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvfoz_4BFfMCAow58oJ858ljOkPnYIm4IXt8bkFZsSLyXSKfWkMQ'},
                   {id:6,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShOEyQqSqVF1YYKteyE3xg16QQQIdBNZLE4QdayAD6RMVjC8udTw'},
                   {id:7,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRF3-OzxgVMLvGaCtc4FwhPTyAjj4OHZCZq0dqtocMFggBWD7Xn'},
                   {id:8,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTF9ycQxjJDjVD3opaBGHnPv3UfQebK4pjwX1Tv-V-fgnQ12RDgww'},
                   {id:9,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwH3vUamHuw4X2fnvLsTGxAqGNQOdVyMoQFLL0nHiLryBRrXAK'},
                   {id:10,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZcqlK5YkSgfleNrG8X0SPHyMnuB_WQcnBTr1K6YGgWeUTRD5A'},
                    ],
                [
                   {id:0,url:''},
                   {id:1,url:''},
                   {id:2,url:''},
                   {id:3,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQC3JMkiuvjvGPmq539DjszAkBjmSc1b_i_81loOc8t5EQPaaQICw'},
                   {id:4,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFK229gDqcAbdU_CDiWtz065SNDcB-qoDBTqicJvGTREwYoHcSLQ'},
                   {id:5,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxAXs5Ba5CbJRlV5Hza21vsds0-Wj1gNpMKBNCgu_wGJEOOS9jBQ'},
                   {id:6,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFEI4_9QsOWq4KE2v8Jaxve6Dr_PagKkVm1FvFxbBQ3q7gLsEq'},
                   {id:7,url:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWCkc9nLgHkPW2HqXm0js3KdZyHxizTuHo-alKstHpBjZjyVMFCg'},
                   {id:8,url:''},
                   {id:9,url:''},
                   {id:10,url:''},
                    ],
                [
                   {id:0,url:'http://img0.imgtn.bdimg.com/it/u=166577089,713074289&fm=26&gp=0.jpg'},
                   {id:1,url:'http://img0.imgtn.bdimg.com/it/u=3028920774,3594085486&fm=26&gp=0.jpg'},
                   {id:2,url:'http://img0.imgtn.bdimg.com/it/u=531268739,2525334841&fm=26&gp=0.jpg'},
                   {id:3,url:'http://img3.imgtn.bdimg.com/it/u=304672054,718695293&fm=15&gp=0.jpg'},
                   {id:4,url:'http://img4.imgtn.bdimg.com/it/u=2157869030,3387944646&fm=15&gp=0.jpg'},
                   {id:5,url:'http://img2.imgtn.bdimg.com/it/u=4194208158,297139554&fm=26&gp=0.jpg'},
                   {id:6,url:'http://img5.imgtn.bdimg.com/it/u=2506988290,2301957563&fm=26&gp=0.jpg'},
                   {id:7,url:'http://img0.imgtn.bdimg.com/it/u=1070575506,3299069170&fm=26&gp=0.jpg'},
                   {id:8,url:'http://img0.imgtn.bdimg.com/it/u=3043655143,2338550619&fm=26&gp=0.jpg'},
                   {id:9,url:'http://img3.imgtn.bdimg.com/it/u=1220117621,531618430&fm=26&gp=0.jpg'},
                   {id:10,url:'http://img5.imgtn.bdimg.com/it/u=190430898,2635177163&fm=26&gp=0.jpg'},
                    ],
                [
                   {id:0,url:'http://img2.imgtn.bdimg.com/it/u=2874788807,818381073&fm=26&gp=0.jpg'},
                   {id:1,url:'http://img5.imgtn.bdimg.com/it/u=1662483355,3897109322&fm=26&gp=0.jpg'},
                   {id:2,url:'http://img2.imgtn.bdimg.com/it/u=953618583,3511437441&fm=26&gp=0.jpg'},
                   {id:3,url:'http://img1.imgtn.bdimg.com/it/u=2915809991,3892143030&fm=26&gp=0.jpg'},
                   {id:4,url:'http://img0.imgtn.bdimg.com/it/u=3674874962,914470514&fm=26&gp=0.jpg'},
                   {id:5,url:'http://img1.imgtn.bdimg.com/it/u=2408581308,3729834527&fm=26&gp=0.jpg'},
                   {id:6,url:'http://img3.imgtn.bdimg.com/it/u=2744806749,3158021548&fm=26&gp=0.jpg'},
                   {id:7,url:'http://img3.imgtn.bdimg.com/it/u=22560351,3743255346&fm=26&gp=0.jpg'},
                   {id:8,url:'http://img3.imgtn.bdimg.com/it/u=3106275356,960363583&fm=26&gp=0.jpg'},
                   {id:9,url:'http://img3.imgtn.bdimg.com/it/u=3761047117,1325141598&fm=26&gp=0.jpg'},
                   {id:10,url:'http://img4.imgtn.bdimg.com/it/u=50270793,1484009029&fm=26&gp=0.jpg'},
                    ],
                [
                   {id:0,url:'http://img4.imgtn.bdimg.com/it/u=2662785624,2609285852&fm=26&gp=0.jpg'},
                   {id:1,url:'http://img5.imgtn.bdimg.com/it/u=1720211335,232769932&fm=26&gp=0.jpg'},
                   {id:2,url:'http://img3.imgtn.bdimg.com/it/u=2028576945,763461684&fm=26&gp=0.jpg'},
                   {id:3,url:'http://img5.imgtn.bdimg.com/it/u=3624235799,4136604832&fm=26&gp=0.jpg'},
                   {id:4,url:'http://img1.imgtn.bdimg.com/it/u=2904824070,1938748805&fm=26&gp=0.jpg'},
                   {id:5,url:'http://img3.imgtn.bdimg.com/it/u=2193345242,372602761&fm=26&gp=0.jpg'},
                   {id:6,url:'http://img2.imgtn.bdimg.com/it/u=1995727539,1979005679&fm=15&gp=0.jpg'},
                   {id:7,url:'http://img4.imgtn.bdimg.com/it/u=3021309064,1078450416&fm=26&gp=0.jpg'},
                   {id:8,url:'http://t8.baidu.com/it/u=4083396958,2815743757&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=4b4ceff2ab5be7a8ec896afc67a3ad98'},
                   {id:9,url:'http://img2.imgtn.bdimg.com/it/u=3967594018,1139193548&fm=15&gp=0.jpg'},
                   {id:10,url:'http://img4.imgtn.bdimg.com/it/u=2578452681,3718371227&fm=15&gp=0.jpg'},
                    ],
                [
                   {id:0,url:'http://img5.imgtn.bdimg.com/it/u=3697727189,3949240366&fm=26&gp=0.jpg'},
                   {id:1,url:'http://img5.imgtn.bdimg.com/it/u=1436842914,1486952627&fm=26&gp=0.jpg'},
                   {id:2,url:'http://img1.imgtn.bdimg.com/it/u=1544787690,1256413999&fm=26&gp=0.jpg'},
                   {id:3,url:'http://img1.imgtn.bdimg.com/it/u=391523712,1378664557&fm=26&gp=0.jpg'},
                   {id:4,url:'http://img1.imgtn.bdimg.com/it/u=2594108883,2609147564&fm=26&gp=0.jpg'},
                   {id:5,url:'http://img3.imgtn.bdimg.com/it/u=2665277252,3966698633&fm=26&gp=0.jpg'},
                   {id:6,url:'http://img3.imgtn.bdimg.com/it/u=221680943,3462348268&fm=26&gp=0.jpg'},
                   {id:7,url:'http://img1.imgtn.bdimg.com/it/u=438134094,1091462467&fm=26&gp=0.jpg'},
                   {id:8,url:'http://img5.imgtn.bdimg.com/it/u=3345993745,757652656&fm=26&gp=0.jpg'},
                   {id:9,url:'http://img5.imgtn.bdimg.com/it/u=3250679847,1667295492&fm=26&gp=0.jpg'},
                   {id:10,url:'http://img2.imgtn.bdimg.com/it/u=3994940684,452071420&fm=26&gp=0.jpg'},
                    ],
                [
                   {id:0,url:'https://f12.baidu.com/it/u=635699678,1374662024&fm=72'},
                   {id:1,url:'https://f10.baidu.com/it/u=2215668647,2273744985&fm=72'},
                   {id:2,url:'http://img5.imgtn.bdimg.com/it/u=563493120,1451199353&fm=26&gp=0.jpg'},
                   {id:3,url:'http://img4.imgtn.bdimg.com/it/u=3597998518,774626770&fm=26&gp=0.jpg'},
                   {id:4,url:'http://img4.imgtn.bdimg.com/it/u=2374884153,1530891391&fm=26&gp=0.jpg'},
                   {id:5,url:'http://img3.imgtn.bdimg.com/it/u=1622593705,1108237724&fm=26&gp=0.jpg'},
                   {id:6,url:'http://img1.imgtn.bdimg.com/it/u=1318122578,305385305&fm=26&gp=0.jpg'},
                   {id:7,url:'http://img4.imgtn.bdimg.com/it/u=1810770915,3275593385&fm=26&gp=0.jpg'},
                   {id:8,url:'http://img3.imgtn.bdimg.com/it/u=2245559505,1818056958&fm=26&gp=0.jpg'},
                   {id:9,url:'http://img4.imgtn.bdimg.com/it/u=2154009673,3896524357&fm=26&gp=0.jpg'},
                   {id:10,url:'http://img1.imgtn.bdimg.com/it/u=2554788876,2118504773&fm=26&gp=0.jpg'},
                    ]
            ],
            imgList:null

        }
    },
    methods:{
        getPhoto(id){
           this.imgList=this.imgListSum[id];
        }
    },
    mounted(){
        this.getPhoto(0);
        // 放在挂载的时候，我们就可以直接进入页面进行滑动的操作
        // 因为我们还没有挂载就绑定不到这个值，必须更细后才能，但是如何我们在挂载的时候就绑定就可以捕获到
        mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离    越小，默认值0.0006
         });
    },
    // 从后台拿数据
    // created(){
    //     this.getAllCategory()
    // },
    // methods:{
    //     getAllCategory(){
    //         this.$http.get(`api/getimgcategory`).then(result=>{
    //             if(result.body.status==0){
    //                 result.body.message.unshift({title:'全部',id:0})
    //                 this.cates=result.body.message;
    //             }
    //         })
    //     }
    // }
}
</script>
<style lang="scss" scoped>
   *{
       touch-action: pan-y;
   }
   .photo-list{
       list-style-type: none;
       padding:10px;
       margin: 0;
       padding-bottom: 50px;

       li{
           background-color: #ccc;
           text-align: center;
           margin-bottom: 10px;
           position: relative;
           img{
               width: 100%;
               vertical-align: middle;
               
           }
           img:hover{
                box-shadow: 8px 8px 5px #ccc;
                transform: translateX(-3px)
           }
           img[lazy="loading"]{
               width: 40px;
               height: 300px;
               margin: auto;
           }
           .info{
               color: white;
               text-align: left;
               position: absolute;
               bottom: 0;
               background-color: rgba(0,0,0,0.4);
               max-height:110px; 
               .info-title{
                   font-size:16px; 
                   text-align: center;
               }
               .info-body{
                   font-size: 13px;

               }
           }
       }
   }
 
</style>